<template>
    <!--template下面不能同时出现多个标签-->
    <div>
        <v-layout row wrap>
            <v-flex xs2>
                <!--按钮-->
                <v-btn color="success">添加品牌</v-btn>
            </v-flex>
            <v-flex xs10>
                <!--搜索框-->
                <v-text-field
                        prepend-icon="search"
                        label="品牌搜索"
                        v-model="searchKey"
                ></v-text-field>
            </v-flex>
        </v-layout>

        <!-- 表格数据-->
        <v-data-table
                :headers="headers"
                :items="brandItem"
                :pagination.sync="pagination"
                :total-items="totalBrand"
                :loading="loading"
                class="elevation-1"
        >
            <!--
            第一种写法： v-slot:items="props"

            第二种写法：
           遍历数据列表
           slot="items"         指定要遍历的数据
           slot-scope="props"   给迭代数据起个别名
           -->
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center"> <img :src="props.item.image"></td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "MyaaaBrand",
        data () {
            return {
                totalBrand: 0,
                brandItem: [], // 在钩子函数赋值
                loading: true, // 进度条
                pagination: {}, // 分页参数
                headers: [
                    { text: 'ID',align: 'center',value: 'id'},
                    { text: '名称',align: 'center',sortable: false, value: 'name' },
                    { text: 'LOGO',align: 'center',sortable: false, value: 'image' },
                    { text: '首字母',align: 'center', value: 'letter' }
                ],
                searchKey: "" // 搜索条件
            }
        },
        mounted () {// 钩子函数会会自动执行
            this.loadData();
        },
        // 监听data属性
        watch: {
            // 只要 searchKey 发生改变：就会自动触发
            searchKey: {
                handler(){
                    this.loadData()
                }
            },
            // 监听分页对象
            pagination:{
                deep: true,  // 深度监听： 监听对象中的属性
                handler(){
                    this.loadData()
                }
            }
        },
        methods: {
            loadData(){
                // 多少毫秒之后，执行
                this.loading = true;
                setTimeout(()=>{
                    console.log("加载数据。。。。。。给brandItem赋值");

                    // 发起请求去查询当前页数据
                    this.$http.get("/item/brand/page",{
                        params: {
                            key: this.searchKey,
                            page: this.pagination.page,
                            rows: this.pagination.rowsPerPage,
                            sortBy: this.pagination.sortBy,
                            desc:this.pagination.descending
                        }
                    }).then(response => {
                        // 成功的回调
                        console.log(response)
                        // 给列表赋值
                        this.brandItem = response.data.items;
                        // 总记录数赋值
                        this.totalBrand = response.data.total;
                        // 加载的进度条
                        this.loading = false;
                    }).catch(error=>{
                        // 异常回调
                        console.log(error)
                        // 加载的进度条
                        this.loading = false;
                    })
                }, 500)
            }
        }
    }
</script>

<style scoped>

</style>